import './special.scss'
import React from 'react'

export default class Special extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            specialList: [],
            tabIndex: -1
        }
    }
    componentDidMount() {
        this.$axios.get('https://apipc-xiaotuxian-front.itheima.net/home/special').then((res) => {
            if (res.data.msg == '操作成功') {
                this.setState({
                    specialList: res.data.result
                })
            }
        })
    }
    render() {
        return (
            <div id='special'>
                <div className="container">
                    <div className="head">
                        <h3>最新专题 <span></span></h3>
                        <a href="">查看全部&gt;</a>
                    </div>
                    <div className="special_list">
                        {this.state.specialList.map((item, index) => {
                            return (
                                <div key={index} className={`l ${index == this.state.tabIndex && 'hover'}`} onMouseOver={()=>{this.setState({tabIndex:index})}} onMouseOut={()=>{this.setState({tabIndex:-1})}}>
                                    <a href="">
                                        <img src={item.detailsUrl} alt="" />
                                        <div className="meta">
                                            <p className="title">
                                                <span>{item.title}</span>
                                                <span>{item.summary}</span>
                                            </p>
                                            <p className="price">￥{item.lowestPrice}起</p>
                                        </div>
                                    </a>
                                    <div className="foot">
                                        <span>{item.viewNum}</span>
                                        <span>{item.replyNum}</span>
                                        <span>{item.collectNum}</span>
                                    </div>
                                </div>
                            )
                        })}

                    </div>
                </div>
            </div >
        )
    }
}